<script setup lang="ts">
  import { ref } from 'vue';
  import { extractCoin, getUserInfo, getBalances } from '/@/apis/userApi';
  import { useRequest } from 'vue-request';
  import { NotifySuccess, isNull, NotifyWarn } from '/@/utils';
  import { i18nTranslate } from '/@/i18n';
  import router from '/@/router';
  import { useUserId } from '/@/hooks';
  const { getUserId } = useUserId();
  const withdrawAmount = ref('');
  const password = ref('');
  const userInfo = ref(<any>{});
  const balance = ref(0);
  const onSubmit = () => {
    if (isNull(withdrawAmount.value) || isNull(password.value)) {
      NotifyWarn('please input');
    } else {
      const params = {
        member: getUserId(),
        balance: withdrawAmount.value,
        currency: 'USD',
        pwd: password.value,
      };
      requestExtractCoin.run(params);
    }
  };
  const requestExtractCoin = useRequest(extractCoin, {
    manual: true,
    onSuccess() {
      NotifySuccess(i18nTranslate('WithdrawalSuccessful'));
      router.push('/fund?fundType=withdraw');
    },
    onError() {
      return;
    },
  });
  useRequest(getUserInfo, {
    defaultParams: [{ member: getUserId() }],
    onSuccess(data: any) {
      userInfo.value = data;
    },
  });
  useRequest(getBalances, {
    defaultParams: [{ member: getUserId(), currency: 'USD' }],
    onSuccess(data: any) {
      if (data.length) {
        balance.value = data[0].assetsBalance;
      }
    },
  });
</script>

<template>
  <div class="withdraw">
    <AppBar back :primary="true" :title="$t('Withdraw')" />
    <div  class="withdraw_content">
      <p class="content_title">{{ $t('Availablefunds') }}</p>
      <div class="available_funds">
           ${{ balance }}
      </div>
      <div class="withdrawal_account">
        <p class="text">{{ $t('Withdrawalaccount') }}</p>
        <div> {{ userInfo.bankUserName }}{{ userInfo.bankCard ? '('+userInfo.bankCard.slice(-4)+')' : '' || userInfo.moneyAddr ? '('+userInfo.moneyAddr.slice(-4)+')' : ''  }} </div>
      </div>
    </div>
    <div class="withdraw_content pb-80">
      <p class="content_title2">{{ $t('Amount') }}</p>
      <div class="input_number">
        <van-field :placeholder="$t('PleaseenteryourAmount')" v-model="withdrawAmount" type="number" />
      </div>
      <p class="content_title2 mart_30">{{ $t('Password') }}</p>
      <div class="input_number">
        <van-field :placeholder="$t('PleaseenterPassword')" v-model="password" type="password" />
      </div>
    </div>
    <div  class="submit_button">
      <LargePrimaryButton block @click="onSubmit">{{
        $t('Submit')
      }}</LargePrimaryButton>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .withdraw {
    padding-bottom: 50px;
    .hr {
      height: 30px;
      background: #f8f8f8;
      width: 100%;
    }
    .withdraw_content {
      margin: 32px 30px 0;
      padding: 55px 32px 43px 36px;
      background: #242424;
      border-radius: 20px;
      .available_funds {
        font-size: 68px;
        font-weight: 700;
        margin-top: 30px;
      }
      .content_title {
        color: rgba(255,255,255, 0.65);
        font-size: 32px;
      }
      .content_title2 {
        color: #FFFFFF;
      }
      .withdrawal_account {
        @include align-center;
        justify-content: space-between;
        margin-top: 30px;
        border-top: 1px solid rgba(255,255,255, 0.15);;
        padding-top: 30px;
        font-size: 26.92px;
        color: rgba(255,255,255, 0.85);
        font-weight: 600;
        .text {
          font-weight: normal;
          color: #8B9199;
        }
      }
      .input_number {
        margin-top: 20px;
        .content_title {
          margin-bottom: 10px;
        }
      }
      .mart_30 {
        margin-top: 30px;
      }
    }
    .pb-80 {
      padding-bottom: 80px;
    }
    .submit_button {
        margin: 140px 30px 0;
      }
  }
</style>
<style lang="scss">
  .withdraw {
    .van-cell {
      background: #111111;
      border-radius: 8px;
      .van-field__control {
        color: #FFFFFF;
        &::placeholder {
          color: rgba(255, 255, 255, 0.25);
        }
      }
    }
  }
</style>
